<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>中华对联 - 创作</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 中国红
                        secondary: '#D4AF37', // 金色
                        accent: '#8B4513', // 棕色
                        light: '#F9F5F1', // 米色背景
                        dark: '#2D2327' // 深色文字
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23c41e3a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
    
    <!-- 导入字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="bg-light bg-pattern text-dark min-h-screen font-song pb-20">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-primary text-white shadow-md transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="index.html" class="p-2 rounded-full hover:bg-primary/80 transition-colors">
                <i class="fa fa-angle-left text-lg"></i>
            </a>
            <h1 class="text-[clamp(1.25rem,5vw,1.75rem)] font-kai font-bold tracking-wider">
                创作对联
            </h1>
            <button id="saveBtn" class="p-2 rounded-full hover:bg-primary/80 transition-colors">
                <i class="fa fa-check text-lg"></i>
            </button>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 对联类型选择 -->
        <section class="mb-6">
            <div class="bg-white rounded-xl shadow-sm p-3">
                <div class="flex overflow-x-auto pb-2 scrollbar-hide space-x-3">
                    <button class="whitespace-nowrap px-4 py-2 bg-primary text-white rounded-full text-sm">
                        自由创作
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        春联
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        喜联
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        寿联
                    </button>
                    <button class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition-colors">
                        宅第联
                    </button>
                </div>
            </div>
        </section>

        <!-- 对联创作区域 -->
        <section class="mb-6">
            <div class="bg-white rounded-xl shadow-sm p-6">
                <!-- 上联输入 -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">上联</label>
                    <textarea id="upperCouple" rows="3" placeholder="请输入上联..." 
                        class="w-full p-4 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 font-kai text-lg resize-none"></textarea>
                </div>
                
                <!-- 分隔符 -->
                <div class="flex justify-center items-center my-4">
                    <div class="w-1/4 h-px bg-gray-200"></div>
                    <div class="mx-4 text-gray-400 text-xl">VS</div>
                    <div class="w-1/4 h-px bg-gray-200"></div>
                </div>
                
                <!-- 下联输入 -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">下联</label>
                    <textarea id="lowerCouple" rows="3" placeholder="请输入下联..." 
                        class="w-full p-4 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 font-kai text-lg resize-none"></textarea>
                </div>
                
                <!-- 横批输入 -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">横批</label>
                    <input id="horizontalScroll" type="text" placeholder="请输入横批（选填）" 
                        class="w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 font-kai text-lg">
                </div>
            </div>
        </section>

        <!-- 辅助工具 -->
        <section class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-bold flex items-center">
                    <span class="w-1 h-5 bg-primary inline-block mr-2 rounded-full"></span>
                    辅助工具
                </h2>
            </div>
            
            <div class="grid grid-cols-2 gap-3">
                <!-- 词库 -->
                <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                            <i class="fa fa-book text-primary"></i>
                        </div>
                        <h3 class="font-medium">对联词库</h3>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">丰富的对联词汇和典故，助您创作更精彩的对联</p>
                    <button class="w-full py-2 bg-gray-100 text-primary rounded-lg text-sm hover:bg-gray-200 transition-colors">
                        打开词库
                    </button>
                </div>
                
                <!-- 平仄检测 -->
                <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                            <i class="fa fa-music text-primary"></i>
                        </div>
                        <h3 class="font-medium">平仄检测</h3>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">检测对联平仄是否符合规范，提升对联质量</p>
                    <button id="checkToneBtn" class="w-full py-2 bg-gray-100 text-primary rounded-lg text-sm hover:bg-gray-200 transition-colors">
                        检测平仄
                    </button>
                </div>
                
                <!-- 对仗分析 -->
                <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                            <i class="fa fa-balance-scale text-primary"></i>
                        </div>
                        <h3 class="font-medium">对仗分析</h3>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">分析上下联对仗情况，提供优化建议</p>
                    <button id="checkMatchBtn" class="w-full py-2 bg-gray-100 text-primary rounded-lg text-sm hover:bg-gray-200 transition-colors">
                        分析对仗
                    </button>
                </div>
                
                <!-- 灵感启发 -->
                <div class="bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                            <i class="fa fa-lightbulb-o text-primary"></i>
                        </div>
                        <h3 class="font-medium">灵感启发</h3>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">获取随机灵感，激发创作思维</p>
                    <button id="getInspirationBtn" class="w-full py-2 bg-gray-100 text-primary rounded-lg text-sm hover:bg-gray-200 transition-colors">
                        获取灵感
                    </button>
                </div>
            </div>
        </section>

        <!-- 创作小贴士 -->
        <section class="mb-6">
            <div class="bg-white rounded-xl shadow-sm p-4">
                <h3 class="font-medium flex items-center mb-3">
                    <i class="fa fa-info-circle text-primary mr-2"></i>
                    创作小贴士
                </h3>
                <div class="text-sm text-gray-600 space-y-2">
                    <p>• 对联讲究对仗工整，字数相等，词性相同</p>
                    <p>• 注意平仄交替，上联最后一字通常为仄声，下联为平声</p>
                    <p>• 可以从季节、景物、情感等方面入手创作</p>
                    <p>• 适当运用比喻、拟人等修辞手法，增强表现力</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-1px_3px_rgba(0,0,0,0.1)] py-2 z-40">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <a href="index.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="create.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-pencil text-lg"></i>
                    <span class="text-xs mt-1">创作</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2');
            }
        });

        // 对联类型选择
        document.querySelectorAll('.bg-gray-100.rounded-full').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有按钮的选中状态
                document.querySelectorAll('.rounded-full').forEach(btn => {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('bg-gray-100');
                });
                
                // 设置当前按钮为选中状态
                this.classList.remove('bg-gray-100');
                this.classList.add('bg-primary', 'text-white');
            });
        });

        // 保存按钮功能
        document.getElementById('saveBtn').addEventListener('click', function() {
            const upperCouple = document.getElementById('upperCouple').value.trim();
            const lowerCouple = document.getElementById('lowerCouple').value.trim();
            
            if (!upperCouple || !lowerCouple) {
                alert('请至少填写上联和下联');
                return;
            }
            
            // 模拟保存成功
            alert('对联保存成功！已添加到您的创作列表');
        });

        // 平仄检测功能
        document.getElementById('checkToneBtn').addEventListener('click', function() {
            const upperCouple = document.getElementById('upperCouple').value.trim();
            const lowerCouple = document.getElementById('lowerCouple').value.trim();
            
            if (!upperCouple || !lowerCouple) {
                alert('请先填写上下联内容');
                return;
            }
            
            // 模拟平仄检测结果
            alert('平仄检测结果：\n\n上联：基本符合平仄规范\n下联：建议最后一字改为平声\n\n详细分析：...');
        });

        // 对仗分析功能
        document.getElementById('checkMatchBtn').addEventListener('click', function() {
            const upperCouple = document.getElementById('upperCouple').value.trim();
            const lowerCouple = document.getElementById('lowerCouple').value.trim();
            
            if (!upperCouple || !lowerCouple) {
                alert('请先填写上下联内容');
                return;
            }
            
            // 模拟对仗分析结果
            alert('对仗分析结果：\n\n总体评分：85分\n\n优秀对仗词：...\n可优化处：...\n\n建议：...');
        });

        // 获取灵感功能
        document.getElementById('getInspirationBtn').addEventListener('click', function() {
            const inspirations = [
                '春回大地，万物复苏',
                '清风明月，高山流水',
                '海纳百川，有容乃大',
                '天增岁月人增寿',
                '花开富贵，竹报平安',
                '一元复始，万象更新',
                '松竹梅岁寒三友',
                '琴棋书画，诗酒花茶'
            ];
            
            const randomInspiration = inspirations[Math.floor(Math.random() * inspirations.length)];
            alert('创作灵感：' + randomInspiration);
        });
    </script>
</body>
</html>